<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>理想视口</title>
    <style>
        /* 我们需要一个50px*50px的盒子，直接放到iPhone8里面会放大来两倍，图片会变模糊。
*/
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }

        /* 解决方法：（手动缩小）放一个100px*100px的盒子，里面再放一个50px*50px的盒子，这样，在PC端，50px*50px的盒子就会变成50px*50px，在iPhone8里面，50px*50px的盒子就会变成100px*100px。 */
    </style>
</head>

<body>
    你好
    物理像素与物理像素比
    在PC端：1px（开发像素）=1px（物理像素）
    在移动端：看物理像素比
    <!-- 模糊的 -->
    <img src="images/apple50(1).jpg" alt="">
    <!-- 清晰的 -->
    <img src="images/apple100.jpg" alt="">
</body>
</body>

</html>